<template>
	<view class="content">
		<view class="star"></view>
		<view class="wrap">
			<!-- ref和show属性是一定要设置的 -->
			<!-- 先缩小再放大再缩小 -->
			<uni-transition ref="one" mode-class="fade" custom-class="div1" :show="true">
			
			</uni-transition>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// 调用动画函数
			setTimeout(()=>{
				this.starAni();
			},1000);
			setTimeout(()=>{
				uni.switchTab({
					url:'/pages/index/index'
				})
			},3000)
		},
		// mounted() {
		// 	this.starAni();
		// },
		methods: {
			// 创建动画函数
			starAni(){
				// 必须确认ref对象获取成功
				// console.log(this.$refs.one);
				this.$refs.one.step({
					scale : 0.5
				},{delay : 100})
				this.$refs.one.step({
					scale : 2.5
				},{delay : 100 , duration : 800})
				this.$refs.one.step({
					scale : 1
				})
				// 执行动画
				this.$refs.one.run();
			}
		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	background-image: url("../../static/845b332a4833d5d.jpg");
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	  .star{
	  	display: block;
	  	width: 4px;
	  	height: 4px;
	  	border-radius: 50%;
	  	background: #fff;
	  	position: relative;
	  	top: 10px;
	  	left: 400px;
	  	box-shadow: 0 0 5px 5px rgba(255, 255, 255, .5);
	  	animation: star-ani 3s linear infinite;
	  	@keyframes star-ani {
	  		0% {
	  			opacity: 0;
	  			transform: scale(0) rotate(0) translate3d(0,0,0);
	  		}
	  		50% {
	  			opacity: 1;
	  			transform: scale(1) rotate(0) translate3d(-100px,100px,0);
	  		}
	  		100% {
	  			opacity: 0;
	  			transform: scale(1) rotate(0) translate3d(-500px,500px,0);
	  		}
	  	}
	  }
	  .star:after{
	  	content: '';
	  	display: block;
	  	top: 0px;
	  	left: 4px;
	  	border: 0px solid #fff;
	  	border-width: 2px 90px 2px 90px;
	  	border-color: transparent transparent transparent rgba(255, 255, 255, .3);
	  	transform: rotate(-45deg) translate3d(1px , 3px , 0);
	  	transform-origin: 0% 0%;
	  }
	.wrap{
		width: 100%;
		height: calc(100vh);
		display: flex;
		align-items: center;
		justify-content: center;
		.div1{
			width: 100px;
			height: 100px;
			border-radius: 6px;
		}
	}
}

</style>
